{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This example shows how to close popup windows (like promotion form) using AgentQL with the [Google Colaboratory](https://colab.research.google.com/) environment."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Install [AgentQL](https://pypi.org/project/agentql/) library"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%pip install agentql"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Install the Playwright dependency required by AgentQL."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "!playwright install chromium"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can [store](https://medium.com/@parthdasawant/how-to-use-secrets-in-google-colab-450c38e3ec75) keys in Google Colab's secrets."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import os\n",
    "\n",
    "from google.colab import userdata\n",
    "\n",
    "os.environ[\"AGENTQL_API_KEY\"]=userdata.get('AGENTQL_API_KEY')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Run AgentQL script. Unfortunately, you can't see the browser window directly in Google Colab like you would on your local machine. However, let's still interact with it and take a screen recording of the browser session to see what’s happening. \n",
    "\n",
    "Please note that an online environment like Google Colab supports **asynchronous version** of AgentQL."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import agentql\n",
    "from playwright.async_api import async_playwright\n",
    "from IPython.display import HTML\n",
    "from base64 import b64encode\n",
    "\n",
    "# Set the URL to the desired website\n",
    "URL = \"https://kinfield.com/\"\n",
    "\n",
    "QUERY = \"\"\"\n",
    "{\n",
    "    popup_form {\n",
    "        close_btn\n",
    "    }\n",
    "}\n",
    "\"\"\"\n",
    "\n",
    "\n",
    "async with async_playwright() as playwright, await playwright.chromium.launch() as browser:\n",
    "  \n",
    "  # Set up the video recording\n",
    "  video_dir = os.path.abspath(\"videos\")\n",
    "  context = await browser.new_context(\n",
    "      record_video_dir=\"videos/\",\n",
    "      record_video_size={\"width\": 1280, \"height\": 720}\n",
    "      )\n",
    "  \n",
    "  # Create a new page in the browser and wrap it to get access to the AgentQL's querying API\n",
    "  page = await agentql.wrap_async(await context.new_page())\n",
    "\n",
    "  await page.goto(URL)\n",
    "\n",
    "  # Use query_elements() method to fetch the close popup button from the page\n",
    "  response = await page.query_elements(QUERY)\n",
    "\n",
    "  # Click the close button to close the popup\n",
    "  await response.popup_form.close_btn.click()\n",
    "  \n",
    "  # Wait for 10 seconds to see the browser in action\n",
    "  await page.wait_for_timeout(10000)\n",
    "\n",
    "  # Close context to ensure video is saved\n",
    "  await context.close()\n",
    "\n",
    "  # Display the video\n",
    "  video_files = [f for f in os.listdir(video_dir) if f.endswith('.webm')]\n",
    "  if video_files:\n",
    "      video_path = os.path.join(video_dir, video_files[0])\n",
    "      with open(video_path, 'rb') as f:\n",
    "        video_bytes = f.read()\n",
    "        \n",
    "      video_b64 = b64encode(video_bytes).decode('utf-8')\n",
    "      video_html = f\"\"\"\n",
    "      <video width=\"800\" controls>\n",
    "        <source src=\"data:video/webm;base64,{video_b64}\" type=\"video/webm\">\n",
    "        Your browser does not support the video tag.\n",
    "      </video>\n",
    "      \"\"\"\n",
    "      display(HTML(video_html))\n",
    "  else:\n",
    "      print(\"No video file was created\")"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
